/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="file-page">
        <div class="file__title">
            <div class="title-left">文件</div>
        </div>
        <div class="file__content">
            <sf-radio-group v-model="datasetModal" class="radio-group" :is-space-group="true">
                <sf-radio-button class="radio-group__item" check-value="table">{{ _('table') }}
                </sf-radio-button>
                <sf-radio-button class="radio-group__item" check-value="file">{{ _('其他') }}
                </sf-radio-button>
            </sf-radio-group>
            <div class="file-list">
                <sf-alert v-if="fileList.length>0"
                          class="file-list__alert"
                          type="info"
                          :show-default-opr="false"
                          :closable="false"
                          :title="_('单个文件下载不能大于500MB，打包下载整个目录不能大于500MB')"
                          :center="false">
                    <span slot="opr" v-qtip=" _('将该目录下所有文件进行打包下载') "
                          class="sim-link"
                          :disabled="data.downloadFlag===0"
                          style="margin-left: 120px;"
                          @click="downloadFile('')">
                        <i class="sf-comp-iconfont icon-comp-download" style="font-size: 12px"/>
                        打包下载
                    </span>
                </sf-alert>
                <div v-for="item in fileList" :key="item.path" class="file-list__item">
                    <span class="file-item__left">
                        <i class="iconfont iconicon-wrapper"></i>
                        <span :title="item.path.split('/').pop()">{{ item.path.split('/').pop() }}</span>
                    </span>
                    <span class="file-item__right">
                        <span>{{ item.size === 0 ? 1 : item.size }}M</span>
                        <i class="sf-comp-iconfont icon-comp-download"
                           :disabled="data.downloadFlag===0"
                           @click="downloadFile(item)"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {downloadFile} from 'src/util/blob_download'
import {v4} from 'uuid';
import {debounce} from 'src/util/delay';

export default {
    props: {
        data: {
            type: Object,
            default: () => ({})
        },
        tablesInfo: {
            type: Array,
            default: () => ([])
        },
        filesInfo: {
            type: Array,
            default: () => ([])
        },
        dataset: {
            type: String,
            default: ''
        },
        dataspace: {
            type: String,
            default: ''
        },
    },
    created() {
        this.downloadFile = debounce(this.downloadFile, 500)
    },
    data() {
        return {
            datasetModal: 'table'
        }
    },
    computed: {
        isTable() {
            return this.datasetModal === 'table'
        },
        fileList() {
            return this.isTable ? this.tablesInfo : this.filesInfo
        },
    },
    methods: {
        downloadFile(record) {
            if (!this.data.downloadFlag) {
                return;
            }
            let packageDownload = false;
            let title = ''
            let filePath = ''
            let packageDownloadType = ''
            if (!record.path) {
                if (this.data.size > 500) { // 大于500M
                    this.$confirm({
                        title: _('失败'),
                        subTitle: _('打包下载失败'),
                        msg: _('打包目录文件超过500MB，无法进行下载'),
                        autoClose: true,
                    })
                    return;
                }
                packageDownload = true
                packageDownloadType = this.datasetModal + 's'
                title = 'download.zip'
            } else {
                if (record.size > 500) {
                    this.$confirm({
                        title: _('失败'),
                        subTitle: _('下载失败'),
                        msg: _('该文件超过500MB，无法进行下载'),
                        autoClose: true,
                    })
                    return;
                }
                title = record.path.split('/').pop()
                filePath = record.path
            }
            downloadFile(`/ai-datalake/api/v2/files?dataspace=${this.dataspace}&dataset=${this.dataset}&filePath=${filePath}&downloadID=${v4()}&packageDownload=${packageDownload}&packageDownloadType=${packageDownloadType}`, 'get', title)
        }
    }
}
</script>

<style scoped lang="less">
.file-page {
    height: 100%;
    
    .file {
        &__title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .title-left {
                height: 24px;
                line-height: 24px;
                border-left: 6px solid #1770E6;
                padding-left: 8px;
                font-size: 16px;
                font-weight: 500;
                color: #000000;
            }
        }
        
        &__content {
            margin-top: 16px;
            height: calc(100% - 40px);
            
            .radio-group {
                .radio-group__item {
                    border-radius: 12px;
                    height: 24px;
                    
                    &:first-child {
                        margin-right: 16px;
                    }
                }
                
            }
            
            .file-list {
                height: calc(100% - 40px);
                margin-top: 12px;
                width: 600px;
                overflow: auto;
                
                &__alert {
                    background-color: #ffffff;
                    border: none;
                    padding: 0;
                    margin-bottom: 8px;
                }
                
                &__item {
                    width: 585px;
                    height: 36px;
                    border-radius: 2px;
                    display: flex;
                    justify-content: space-between;
                    flex-direction: row;
                    align-items: center;
                    padding: 7px 12px;
                    align-self: stretch;
                    background: #F7F8FA;
                    
                    &+.file-list__item {
                        margin-top: 12px;
                    }
                    .file-item {
                        &__left {
                            height: 22px;
                            width: 80%;
                            line-height: 22px;
                            color: #1D2129;
                            display: flex;
                            
                            .iconfont {
                                margin-right: 12px;
                            }
                            
                            span {
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                        
                        &__right {
                            line-height: 22px;
                            color: #1D2129;
                            display: flex;
                            
                            .sf-comp-iconfont {
                                cursor: pointer;
                                margin-left: 34px;
                                
                                &[disabled] {
                                    color: #7f7f7f;
                                    background-color: transparent;
                                    cursor: default;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
}
</style>
